<template>
  <Layout class="home">
    <Header class="top-header">
      <Dropdown trigger="click">
        <a href="javascript:void(0)" style="color: white;">
          <Icon type="md-contact" />
          <span>&nbsp;&nbsp;Hi, {{ user.username }}</span>
        </a>
        <DropdownMenu slot="list" @on-click="dropdownMenuOnclick">
          <DropdownItem
            v-for="dropItem in dropItems"
            :key="dropItem.name"
            :name="dropItem.name"
          >{{ dropItem.text }}</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </Header>
    <Layout>
      <Sider
        hide-trigger
        style=" background: #fff; "
        collapsible
        v-model="asideCollapse"
        @on-collapse="asideCollapseToggle"
      >
        <Menu theme="light" width="auto">
          <MenuItem :name="menu.name" v-for="menu in asideMenus" :key="menu.name" :to="menu.path">
            <Icon :type="menu.icon" />
            {{ menu.text }}
          </MenuItem>
        </Menu>
      </Sider>
      <Layout style="padding: 0 24px 24px;">
        <Breadcrumb style=" margin: 24px 0;">
          <BreadcrumbItem to="/">首页</BreadcrumbItem>
          <BreadcrumbItem
            v-for="breadcrumb in breadcrumbs"
            :key="breadcrumb.name"
            :to="breadcrumb.path"
          >{{ breadcrumb.text }}</BreadcrumbItem>
        </Breadcrumb>
        <Content style="padding: 24px min-height: 280px; background: #fff;">
          <router-view />
        </Content>
      </Layout>
    </Layout>
  </Layout>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      breadcrumbs: [],
      dropItems: [],
      breadcrumbs: [],
      isCollapsed: true
    };
  },
  methods: {
    dropdownMenuOnclick(name) {
      for (let i = 0, len = dropItems; i < len; i++) {
        if (dropItems[i].name === name) {
          return dropItems.cb(name);
        }
      }
    },
    ...mapActions("user", ["load", "init"]),
    ...mapActions("menu", ["asideCollapseToggle"])
  },
  computed: {
    ...mapState("user", {
      status: state => state.status,
      user: state => state.info
    }),
    ...mapState("menu", [
      "headMenus",
      "asideMenus",
      "dropMenus",
      "asideCollapse"
    ])
  },
  async beforeCreate() {
    if (this.status) {
      return this.load();
    }
    this.$Notice.info("初始化用户，请稍候");
    return this.init();
  }
};
</script>

<style>
.home {
  height: 100vh;
}
.top-header {
  text-align: right;
  color: white;
  font-size: 14px;
}
</style>
